<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			
			.main{
				overflow: hidden;
				width: 100%;
				margin-top: 50px;
			}
			
			.main ul{
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
			}
			
			.main li{
				list-style: none;
				text-align: center;
				background: ;
				line-height: 200px;
				width: 30%;
				height: 30%;
				margin-bottom: 10px;
				margin-right: 10px;
				border-color: black;
				border-style: solid;
				border-width: 1px;
			}
		</style>
		
		<script>
			let indexs = [0,1,2,4,7,6,5,3];
			window.onload = function()
			{
				let btn = document.querySelector('button');
				let lis = document.querySelectorAll('.option');
				let timer = null;
				let t;
				let o = 0;
				
				btn.onclick = function()
				{
					if(btn.innerHTML == '开始')
					{
						btn.innerHTML = '暂停';
					}
					// 设置循环的时间
					let interval = 0;
					
					if(timer == null)
					{
						t = setInterval(function(){
							interval++;
							
							// 先清空背景色
							for(let i = 0; i < lis.length; i++)
							{
								lis[i].style.background = '';
							}
							
							
							if(o != lis.length)
							{
								lis[indexs[o]].style.background = 'red';
								o++;
							}
							else
							{
								o = 0;
							}
							
							if(interval == 12)
							{
								clearInterval(t);
							}
						},50)
					}
				}
			}
		</script>
	</head>
	<body>
		<div class="main">
			<ul>
				<li class="option">1</li>
				<li class="option">2</li>
				<li class="option">3</li>
				<li class="option">8</li>
				<li>
					<button>开始</button>
				</li>
				<li class="option">4</li>
				<li class="option">7</li>
				<li class="option">6</li>
				<li class="option">5</li>
			</ul>
		</div>
	</body>
</html>